<!DOCTYPE html>
<html>
<head>
	<title>日历</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<link href="/css/fullcalendar.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="/js/jquery1.10.2.min.js"></script>
	<script type="text/javascript" src="/js/jquery-ui.custom.min.js"></script>
    <script type="text/javascript" src="/js/moment.min.js"></script>
    <script type="text/javascript" src="/js/fullcalendar.js"></script>
</head>
<body>
<input type="hidden" id="roomId" th:value="${roomId}">
<div id='calendar'></div>
<script type="text/javascript">
	var roomId = $("#roomId").val();
	var months = [ "1", "2","3", "4","5", "6","7", "8","9", "10","11", "12" ];//定期显示的月份
	var days = [ "周日", "周一", "周二", "周三", "周四", "周五", "周六" ];//定义显示的星期
	$('#calendar').fullCalendar({
		locale: 'zh-cn',
		monthNames : months,
		monthNamesShort : months,
		dayNames : days,
		dayNamesShort : days,
		firstDay : 0,//定义星期几是第一天
		buttonText : {//按钮的内容
			today : '今天',
			month : '月',
			week : '周',
			day : '日'
		},
		header : {//插件顶部显示的按钮
			left : 'month,agendaWeek,agendaDay',
			center : 'prevYear,prev,    title    ,next,nextYear',
			right : 'today'
		},
		columnFormat : {//表头列格式
			month : 'ddd',
			week : 'M月d日 ddd',
			day : ''
		},
		contentHeight : 500,//插件高度
		droppable : true, //允许拖拽
		allDayDefault : false,//创建日程直接挂在日历中
		weekMode : 'fixed', //月视图的显示模式，fixed：固定显示6周高；liquid：高度随周数变化；variable: 高度固定
		defaultView : 'agendaDay', //初始化时的默认视图，month、agendaWeek、agendaDay
		allDaySlot : false, //agenda视图下是否显示all-day
		allDayText : '', //agenda视图下all-day的显示文本
		slotMinutes : 30, //agenda视图下两个相邻时间之间的间隔
		businessHours : true,//区分工作时间
		minTime : 8,//时间开始的点
		maxTime : 18,//时间结束的点
		slotEventOverlap : false,//设置日程不重叠
		axisFormat : 'ttHH:mm', //若要显示中文请修改源码，即fullcalendar.js文件的1635行
		titleFormat : {//标题格式
			month : 'yyyy年MMMM月',
			week :"yyyy年MMM月d日{'&#8212;'[yyyy年][MMM月]d日}",
			day : 'yyyy年MMM月d日 ddd'
		},
		defaultEventMinutes : 60,//非all-day时，如果没有指定结束时间，默认执行120分钟
		eventLimit : false, //设置为true时，如果数据过多超过日历格子显示的高度时，多出去的数据不会将格子挤开，点击后才会完整显示所有的数据
		weekends : true, //设置是否显示周六和周日，设为false则不显示
		selectable : true, //设置是否可被单击或者拖动选择
		selectHelper : true, //点击或者拖动选择时，是否显示时间范围的提示信息，该属性只在agenda视图里可用
		unselectAuto : true, //点击或者拖动选中之后，点击日历外的空白区域是否取消选中状态 true为取消 false为不取消，只有重新选择时才会取消
		editable : true, //Event是否可被拖动或者拖拽
		dragOpacity : 0.5, //Event被拖动时的不透明度
		events : function(start, end, callback) {//初始化日程信息
			$.ajax({
				url : "/room/select?roomId="+roomId,
				type : 'GET',
				async : false,
				cache : false,
				contentType : 'application/json',
				success : function(result) {
					var events = [];
					for (var i = 0; i < result.data.length; i++) {
						var title = result.data[i].roomTitle;
						var id = result.data[i].subscribeId;
						var start = result.data[i].startTime;
						var end = result.data[i].endTime;
						events.push({
							id : id,
							title : title,
							start : start,
							end : end,
							backgroundColor: '#0693EB',
							allday : false
						});
					}
					callback(events);
				},
				error : function(jqXHR, textStatus,errorThrown) {
					alert(jqXHR.responseText);
					CloseWindow();
				}
			});
		},
		dayClick : function(date, allDay, jsEvent, view) {//日期点击时间，此事件跳转到点击的日期视图
		},
		eventResize : function(event, dayDelta, revertFunc) {//修改日程大小
			var startTime = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
			var endTime = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
			$.ajax({
				url : "/room/update?subscribeId="+event.id+"&roomId="+roomId+"&roomTitle="+event.title+"&startTime="+startTime+"&endTime="+endTime,
				type : 'GET',
				async : false,
				cache : false,
				contentType : 'application/json',
				success : function(result) {
					location.reload();
				},
				error : function(jqXHR, textStatus,errorThrown) {
					alert(jqXHR.responseText);
				}
			});
		},
		eventDrop : function(event, dayDelta, minuteDelta,revertFunc, allDay) {//日程拖拽
			var startTime = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
			var endTime = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
			$.ajax({
				url : "/room/update?subscribeId="+event.id+"&roomId="+roomId+"&roomTitle="+event.title+"&startTime="+startTime+"&endTime="+endTime,
				type : 'GET',
				async : false,
				cache : false,
				contentType : 'application/json',
				success : function(result) {
					location.reload();
				},
				error : function(jqXHR, textStatus,errorThrown) {
					alert(jqXHR.responseText);
				}
			});
		},
		select : function(start, end, allDay, event, view) {//周视图与日视图的日程新增，用的是js的prompt提示框
			//月视图为true，周视图与日视图为false
			if (allDay) {
				return;
			} else {
				var roomTitle = prompt("请输入会议名称","");
				if (roomTitle == null) {
					location.reload();
					return;
				}
				var startTime = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
				var endTime = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
				$.ajax({
					url : "/room/insert?roomId="+roomId+"&roomTitle="+roomTitle+"&startTime="+startTime+"&endTime="+endTime,
					type : 'GET',
					async : false,
					cache : false,
					contentType : 'application/json',
					success : function(result) {
						location.reload();
					},
					error : function(jqXHR, textStatus,errorThrown) {
						alert(jqXHR.responseText);
					}
				});
			}
		},
		eventClick : function(event, jsEvent, view) {//日程点击事件，用于日程修改
			console.log(event);
			var roomTitle = prompt("请输入会议名称",event.title);
			if (roomTitle == null || roomTitle == event.title) {
				location.reload();
				return;
			}
			var startTime = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
			var endTime = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
			$.ajax({
				url : "/room/update?subscribeId="+event.id+"&roomId="+roomId+"&roomTitle="+roomTitle+"&startTime="+startTime+"&endTime="+endTime,
				type : 'GET',
				async : false,
				cache : false,
				contentType : 'application/json',
				success : function(result) {
					console.log(result);
					location.reload();
				},
				error : function(jqXHR, textStatus,errorThrown) {
					alert(jqXHR.responseText);
				}
			});
		}
	});
</script>
</body>
</html>